<template xmlns:el-tree-select="http://www.w3.org/1999/html">
  <div>
    <el-tree-select :data="treeData" :checkedKeys="selectValue" @nodeClickChange="changeSelectNode"></el-tree-select>
  </div>
</template>

<script>
import ElTreeSelect from "@/components/common/ElTreeSelect";
import {list} from "@/api/sys/menuApi";
import treeUtils from "@/utils/treeUtils";

export default {
  name: "el-menu-tree-select",
  components: {
    ElTreeSelect
  },
  props: {
    value: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
      default: null,
    }
  },
  watch: {
    value(val) {
      this.calculationTreeSelectValue()
    }
  },
  data() {
    return {
      selectValue: [],
      treeData: null,
    }
  },
  created() {
    this.initAllTree();
    this.calculationTreeSelectValue();
  },

  methods: {
    initAllTree() {
      list().then(res => {
        let data = res.data.data;
        this.treeData = treeUtils.listToTree(data)
      })
    },
    calculationTreeSelectValue() {
      if (!this.value) {
        this.selectValue = []
        return
      }
      let temp = [];
      temp.push(this.value)
      this.selectValue = temp;
    },
    changeSelectNode(key,data,node) {
      this.$emit("input",data.id)
    }
  }
}
</script>

<style scoped>

</style>
